/**
 * Created by gengrong on 16/5/4.
 */
import { ImgHolder, SmartForm } from 'comps/common';
import { Form, Input, Button, Row, Col, Upload, Icon } from 'antd';
import * as React from 'react';

class UserProfileForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      submiting: false,
      avatar: props.loginUser.avatar
    };
  }

  onSubmit(evt) {
    evt.preventDefault();
    this.props.smartSubmit((values) => {
      return this.props.onSaveProfile(values);
    });
  }

  checkMobile(rule, value, callback) {
    if (!value || /^1[\d]{10}$/.test(value)) {
      callback();
    } else {
      callback('请输入正确的手机号码');
    }
  }

  render() {
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };

    const firstName = this.props.loginUser.email.substr(0, 1);

    const nikeProps = this.props.form.getFieldProps('nick', {
      rules: [
        { required: true, message: '请填写用户昵称' }
      ],
      initialValue: this.props.loginUser.nick
    });

    const mobileProps = this.props.form.getFieldProps('mobile', {
      rules: [
        { validator: this.checkMobile.bind(this) }
      ],
      initialValue: this.props.loginUser.mobile
    });

    const avatarProps = this.props.form.getFieldProps('avatar', {
      initialValue: this.props.loginUser.avatar
    });

    const uploadProps = {
      action: '/api/images/upload',
      showUploadList: false,
      onChange: (info) => {
        if (!info.file.response) {
          return;
        }
        const url = info.file.response.url;
        this.props.form.setFieldsValue({ avatar: url });
        this.setState({ avatar: url });
      }
    };

    return (
      <div>
        <Form className='user-profile-form' horizontal form={this.props.form} onSubmit={::this.onSubmit}>
          <Row>
            <Col span='18'>
              <Form.Item {...layout} label='Email：'>
                <Input disabled value={this.props.loginUser.email}/>
              </Form.Item>
              <Form.Item {...layout} label='昵称：'>
                <Input {...nikeProps} placeholder='输入用户昵称'/>
              </Form.Item>
              <Form.Item {...layout} label='手机号码：'>
                <Input {...mobileProps} placeholder='输入用户手机号码'/>
              </Form.Item>
            </Col>
            <Col span='6'>
              <div className='userAvatar'>
                <Input type='hidden' {...avatarProps}/>
                <ImgHolder className='avatarImg' src={this.state.avatar} rect='60x60' text={firstName}/>
                <Upload {...uploadProps}>
                  <Button type='ghost'>
                    <Icon type='upload'/> 上传头像
                  </Button>
                </Upload>
              </div>
            </Col>
          </Row>
          <Row>
            <Col span='16' offset='2'>
              <Button htmlType='submit' type='primary' loading={this.state.submiting}>提交</Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

UserProfileForm = Form.create()(SmartForm.beSmart()(UserProfileForm));

export default UserProfileForm;
